<template>
  <div>
    <h2>Cart</h2>
    <div v-show="cartProducts.length === 0">Please add some products to cart.</div>
    <ul>
      <li v-for="item in cartProducts" :key="item.id">
        <span>{{item.title}}</span>
        -
        <span>{{item.price}} </span>
        x
        <span>{{item.quantity}}</span>
      </li>
    </ul>
    <div>Total: ${{totalPrice}}</div>
    <button :disabled="cartProducts.length === 0"  @click="checkFnc(cartProducts)">Checkout</button>
    <div v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapGetters('cart', ['cartProducts', 'totalPrice']),
    ...mapState('cart', ['checkoutStatus'])
  },
  methods: {
    // checkFnc () {
    //   this.$store.dispatch('cart/checkout',)
    // }
    ...mapActions('cart', {
      checkFnc: 'checkout'
    })
  }

}
</script>
<style scoped>

</style>
